<template>
  <div class="page-container">
    <el-tabs v-model="searchParams.status" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="待支付" name="wait_pay"></el-tab-pane>
      <el-tab-pane label="待备货" name="wait_food"></el-tab-pane>
      <el-tab-pane label="配送中" name="wait_received"></el-tab-pane>
      <el-tab-pane label="已完成" name="finish"></el-tab-pane>
      <el-tab-pane label="待处理退款" name="wait_refund"></el-tab-pane>
      <el-tab-pane label="已退款" name="refund"></el-tab-pane>
      <el-tab-pane label="拒绝退款" name="fail"></el-tab-pane>
    </el-tabs>
    <SearchForm
        :search-list="searchList"
        :search-params="searchParams"
        @search="onSearch"
        @reset="onReset"
    />
    <div class="table-box">
      <el-table
          v-loading="loading"
          height="100%"
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
      >
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" >
          <template slot-scope="scope">
            <el-image v-if="item.type === 'image' && scope.row[item.prop]" :preview-src-list="(scope.row[item.prop] || '').split(',')" :src="scope.row[item.prop]" style="width: 60px;height: 60px;border: 1px solid #3CAA49" fit="contain" />
            <span v-if="item.type === 'select'">
              {{ item.mapping[scope.row[item.prop]] }}
            </span>
            <span v-if="!item.type">{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品" >
          <template slot-scope="scope">
            <div v-html="scope.row.goodsName"></div>
          </template>
        </el-table-column>
        <el-table-column label="收货时间"  prop="send_time"/>
        <el-table-column label="收货人"  prop="address_nickname"/>
        <el-table-column label="联系方式"  prop="address_phone"/>
        <el-table-column label="收货地址" >
          <template slot-scope="scope">
            {{ scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column label="退款原因" >
          <template slot-scope="scope">
            <div v-html="scope.row.back_reason"></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.statusName === '备货中'" type="text" @click="onEdit1(scope.row)">备货完成</el-button>
            <el-button v-if="scope.row.statusName === '配送中'" type="text" @click="onEdit2(scope.row)">配送完成</el-button>
            <el-button v-if="scope.row.statusName === '退款审核中'" type="text" @click="onEdit3(scope.row)">退款处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
      />
    </div>
    <Add ref="addFormRef" @get-page="initData" />

  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http } from '@/api'
import Add from "./add.vue";
export default {
  name: 'category',
  components: {Add},
  mixins: [crud],
  data() {
    return {
      tabIndex: 0,
      request: http.order,
      searchList: [
        {
          key: 'order_no',
          name: 'input',
          label: '订单号'
        }
      ],
      searchParams: {
        name: '',
        status: 'all'
      },
      columns: [
        { prop: 'order_no', label: '订单号' },
        { prop: 'statusName', label: '订单状态' },
        { prop: 'amount', label: '订单金额' },
        { prop: 'pay_way', label: '支付方式' },
      ],
      tableData: [
      ]
    }
  },
  methods: {
    getStatus(item) {
      if (item.order_status === 0) {
        if (item.status === 1) {
          return '待支付'
        } else if (item.status === 2) {
          return '备货中'
        } else if (item.status === 3) {
          return '配送中'
        } else if (item.status === 4) {
          return '已完成'
        }
      } else if (item.order_status === 1) {
        return '退款审核中'
      } else if (item.order_status === 2) {
        return '退款成功'
      } else if (item.order_status === 3) {
        return '退款失败'
      } else if (item.order_status === 4) {
        if (item.status === 4) {
          return '已完成'
        }
      }
    },

    handleClick(){
      this.onSearch()
    },
    formatTableData(data) {
      data.forEach(el => {
        el.statusName = this.getStatus(el)
        el.goodsName = el.orderDetails.map(item => {
          return item.goods_name + '-' + item.spec_key + ' x ' + item.count
        }).join('</br>')
        el.pay_way = '货到付款'
      })
      console.log('data',data)
    },
    onEdit1(row) {
      this.$confirm('确认备货完成吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.order.update(row.id,{
          id: row.id,
          order_status: 0,
          status: 3
        }).then(() => {
          this.onSearch()
        })
      }).catch(() => {
      })
    },
    onEdit2(row) {
      this.$confirm('确认配送完成吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.order.update(row.id,{
          id: row.id,
          order_status: 0,
          status: 4
        }).then(() => {
          this.onSearch()
        })
      }).catch(() => {
      })
    },
    onEdit3(row) {
      this.$refs.addFormRef.open(row)
    },
  }
}
</script>

<style scoped lang="scss">
</style>
